<template>
    <div class="add-article-container">
        <div class="content-wrapper">
            <div class="header-section">
                <h2 class="page-title">
                    <i class="el-icon-edit"></i>
                    发布文章
                </h2>
                <p class="page-subtitle">分享你的见解和经验</p>
            </div>
            
            <div class="form-card">
                <el-form 
                    :model="form" 
                    label-width="80px" 
                    :rules="rules" 
                    ref="ruleFormRef"
                    class="article-form"
                >
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="标题" prop="title">
                                <el-input 
                                    v-model="form.title" 
                                    placeholder="请输入文章标题"
                                    class="title-input"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <el-form-item label="摘要" prop="digest">
                                <el-input 
                                    v-model="form.digest" 
                                    placeholder="请输入文章摘要"
                                    type="textarea"
                                    :rows="3"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="标签" prop="label">
                                <el-select 
                                    v-model="form.label" 
                                    placeholder="请选择文章标签"
                                    class="tag-select"
                                >
                                    <el-option 
                                        :label="i.name" 
                                        :value="i.id" 
                                        v-for="i in label"
                                        :key="i.id"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-form-item class="action-buttons">
                        <el-button 
                            type="info" 
                            @click="submitForm(ruleFormRef, 0)"
                            :loading="isSubmitting"
                            class="draft-btn"
                        >
                            <i class="el-icon-document"></i>
                            保存草稿
                        </el-button>
                        <el-button 
                            type="primary" 
                            @click="submitForm(ruleFormRef, 1)"
                            :loading="isSubmitting"
                            class="publish-btn"
                        >
                            <i class="el-icon-upload"></i>
                            立即发布
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            
            <div class="editor-card">
                <div class="editor-header">
                    <h3>正文内容</h3>
                    <p>支持Markdown语法</p>
                </div>
                <v-md-editor 
                    v-model="form.content" 
                    height="500px"
                    :toolbar="toolbar"
                    placeholder="请输入文章内容..."
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getLabel, createArticle } from '@/api/community'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const label = ref([])
const isSubmitting = ref(false)

// 获取标签数据
getLabel().then((data) => {
    label.value = data
})

const ruleFormRef = ref()

const form = reactive({
    title: '',
    digest: '',
    content: '',
    label: '',
    status: 0
})

const toolbar = {
    bold: true,
    italic: true,
    header: true,
    underline: true,
    strikethrough: true,
    mark: true,
    superscript: true,
    subscript: true,
    quote: true,
    ol: true,
    ul: true,
    link: true,
    imagelink: true,
    code: true,
    table: true,
    fullscreen: true,
    readmodel: true,
    htmlcode: true,
    help: true,
    undo: true,
    redo: true,
    trash: true,
    save: true,
    navigation: true,
    alignleft: true,
    aligncenter: true,
    alignright: true,
    subfield: true,
    preview: true
}

const rules = reactive({
    title: [
        {
            required: true,
            message: '请输入文章标题',
            trigger: 'blur',
        },
        {
            min: 1,
            max: 100,
            message: '标题长度为1-100个字符',
            trigger: 'blur',
        },
    ],
    label: [
        {
            required: true,
            message: '请选择文章标签',
            trigger: 'change',
        },
    ],
    digest: [
        {
            required: true,
            message: '请输入文章摘要',
            trigger: 'blur',
        },
        {
            min: 1,
            max: 300,
            message: '摘要长度为1-300个字符',
            trigger: 'blur',
        },
    ]
})

const submitForm = async (formEl, status) => {
    if (!formEl) return
    
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (!form.content.trim()) {
                ElMessage.warning('请输入文章内容')
                return
            }
            
            isSubmitting.value = true
            form.status = status
            
            createArticle(form).then((data) => {
                ElMessage.success(status === 0 ? '草稿保存成功' : '文章发布成功')
                router.push('/article')
            }).catch((error) => {
                let data = error.response?.data || {}
                for (let key in data) {
                    ElMessage.error(data[key][0] || '操作失败')
                }
            }).finally(() => {
                isSubmitting.value = false
            })
        } else {
            console.log('表单验证失败:', fields)
        }
    })
}
</script>

<style lang="less" scoped>
.add-article-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.header-section {
    text-align: center;
    margin-bottom: 30px;
    color: white;
    
    .page-title {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        
        i {
            margin-right: 10px;
        }
    }
    
    .page-subtitle {
        font-size: 16px;
        opacity: 0.9;
        margin: 0;
    }
}

.form-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.article-form {
    .title-input {
        :deep(.el-input__inner) {
            font-size: 16px;
            font-weight: 500;
        }
    }
    
    .tag-select {
        width: 100%;
    }
    
    .action-buttons {
        text-align: center;
        margin-top: 20px;
        
        .el-button {
            margin: 0 10px;
            padding: 12px 25px;
            font-size: 14px;
            border-radius: 25px;
            transition: all 0.3s ease;
            
            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            }
        }
        
        .draft-btn {
            background: linear-gradient(45deg, #a8a8a8, #888);
            border: none;
            color: white;
        }
        
        .publish-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
        }
    }
}

.editor-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    .editor-header {
        margin-bottom: 20px;
        
        h3 {
            margin: 0 0 5px 0;
            font-size: 20px;
            color: #333;
        }
        
        p {
            margin: 0;
            color: #666;
            font-size: 14px;
        }
    }
    
    :deep(.v-md-editor) {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
}

// 响应式设计
@media (max-width: 768px) {
    .add-article-container {
        padding: 10px;
    }
    
    .form-card, .editor-card {
        padding: 20px;
        border-radius: 15px;
    }
    
    .header-section .page-title {
        font-size: 24px;
    }
    
    .article-form {
        .action-buttons .el-button {
            padding: 10px 20px;
            font-size: 12px;
        }
    }
}
</style> 